<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社区</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2627533_d7zlvvj6zdr.css">
    <style>
        body {
            background-color: #f5f5f5;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #8c8c8c;
            font-size: 0.75rem;
        }
        .nav-item.active {
            color: #0052d9;
        }
        .icon {
            font-size: 1.5rem;
            margin-bottom: 0.25rem;
        }
        .tab-item {
            position: relative;
            padding: 12px 0;
            font-size: 14px;
            flex: 1;
            text-align: center;
            color: #666;
        }
        .tab-item.active {
            color: #0052d9;
            font-weight: 500;
        }
        .tab-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 3px;
            background-color: #0052d9;
            border-radius: 2px;
        }
        .post-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .badge {
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 1px 5px;
            border-radius: 3px;
            font-size: 10px;
        }
        .topic-tag {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            margin-right: 6px;
            color: #0052d9;
            background-color: #eaf3ff;
            border: 1px solid #b5d4ff;
        }
        .user-level {
            display: inline-block;
            padding: 1px 4px;
            border-radius: 2px;
            font-size: 10px;
            margin-left: 4px;
            color: white;
            background-color: #ff9800;
        }
        .action-icon {
            color: #666;
            font-size: 1.2rem;
        }
        .float-btn {
            position: fixed;
            right: 16px;
            bottom: 80px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #0052d9;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0, 82, 217, 0.3);
            z-index: 10;
        }
    </style>
</head>
<body class="pb-16">
    <header class="bg-white p-4 flex items-center shadow-sm">
        <h1 class="text-lg font-medium flex-1 text-center">康养社区</h1>
        <a href="#" class="ml-auto">
            <i class="icon iconfont icon-search text-gray-500"></i>
        </a>
    </header>

    <!-- 分类标签 -->
    <div class="bg-white flex border-b border-gray-200 sticky top-0 z-10">
        <div class="tab-item active">推荐</div>
        <div class="tab-item">最新</div>
        <div class="tab-item">热门</div>
        <div class="tab-item">关注</div>
    </div>

    <!-- 话题分类横向滚动 -->
    <div class="bg-white p-3 overflow-x-auto border-b border-gray-100">
        <div class="flex space-x-2 pb-1">
            <div class="topic-tag"># 贵州旅游</div>
            <div class="topic-tag"># 康养攻略</div>
            <div class="topic-tag"># 美食分享</div>
            <div class="topic-tag"># 四季风光</div>
            <div class="topic-tag"># 民族文化</div>
            <div class="topic-tag"># 温泉体验</div>
            <div class="topic-tag"># 露营徒步</div>
        </div>
    </div>

    <!-- 社区内容列表 -->
    <div class="p-3 space-y-4">
        <!-- 内容卡片1：带多图的游记 -->
        <div class="post-card">
            <div class="p-3">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full overflow-hidden mr-2">
                        <img src="https://via.placeholder.com/40x40?text=头像" class="w-full h-full object-cover" alt="用户头像">
                    </div>
                    <div>
                        <div class="flex items-center">
                            <span class="text-sm font-medium">贵州旅行家</span>
                            <span class="user-level">Lv.5</span>
                        </div>
                        <div class="text-xs text-gray-500 mt-0.5">2025-06-10 · 贵阳市</div>
                    </div>
                    <button class="ml-auto text-sm text-blue-500 px-2 py-1 rounded-full border border-blue-500">
                        + 关注
                    </button>
                </div>
                
                <div class="mt-2">
                    <div class="text-base font-medium">探秘贵州梵净山，感受高山云雾中的静谧康养</div>
                    <div class="text-sm text-gray-700 mt-1 line-clamp-3">
                        梵净山位于贵州省铜仁市，是武陵山脉主峰，也是联合国"世界生物圈保护区"和世界自然遗产。这里云雾缭绕，植被茂密，空气中负氧离子含量极高，是天然的"氧吧"，非常适合夏季避暑和康养。我们在山中小住三天，每日清晨跟随当地人习练太极，傍晚泡温泉，绝对是身心放松的绝佳体验...
                    </div>
                </div>
                
                <div class="mt-3 grid grid-cols-3 gap-1">
                    <img src="https://via.placeholder.com/120x120?text=梵净山1" class="w-full h-24 object-cover rounded" alt="游记图片">
                    <img src="https://via.placeholder.com/120x120?text=梵净山2" class="w-full h-24 object-cover rounded" alt="游记图片">
                    <img src="https://via.placeholder.com/120x120?text=梵净山3" class="w-full h-24 object-cover rounded" alt="游记图片">
                </div>
                
                <div class="flex items-center mt-3 text-sm text-gray-500">
                    <span class="topic-tag"># 贵州旅游</span>
                    <span class="topic-tag"># 康养攻略</span>
                </div>
                
                <div class="flex items-center justify-between mt-3 pt-3 border-t border-gray-100">
                    <div class="flex items-center">
                        <div class="flex items-center mr-4">
                            <i class="action-icon iconfont icon-like mr-1"></i>
                            <span class="text-sm text-gray-500">248</span>
                        </div>
                        <div class="flex items-center mr-4">
                            <i class="action-icon iconfont icon-comment mr-1"></i>
                            <span class="text-sm text-gray-500">36</span>
                        </div>
                        <div class="flex items-center">
                            <i class="action-icon iconfont icon-share mr-1"></i>
                            <span class="text-sm text-gray-500">18</span>
                        </div>
                    </div>
                    <div>
                        <i class="action-icon iconfont icon-more"></i>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 内容卡片2：美食分享 -->
        <div class="post-card">
            <div class="p-3">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full overflow-hidden mr-2">
                        <img src="https://via.placeholder.com/40x40?text=头像2" class="w-full h-full object-cover" alt="用户头像">
                    </div>
                    <div>
                        <div class="flex items-center">
                            <span class="text-sm font-medium">美食探店达人</span>
                            <span class="user-level">Lv.4</span>
                        </div>
                        <div class="text-xs text-gray-500 mt-0.5">2025-06-09 · 安顺市</div>
                    </div>
                    <button class="ml-auto text-sm text-gray-500 px-2 py-1 rounded-full bg-gray-100">
                        已关注
                    </button>
                </div>
                
                <div class="mt-2">
                    <div class="text-base font-medium">安顺特色美食推荐，这几家店绝对不能错过！</div>
                    <div class="text-sm text-gray-700 mt-1 line-clamp-2">
                        安顺作为贵州的美食重镇，除了有名的牛肉粉、丝娃娃外，还有很多隐藏在小巷中的美食宝藏。这次给大家推荐几家我的心头好，都是当地人经常去的地方，价格实惠，味道正宗...
                    </div>
                </div>
                
                <div class="mt-3">
                    <img src="https://via.placeholder.com/750x300?text=安顺美食" class="w-full h-48 object-cover rounded" alt="美食图片">
                </div>
                
                <div class="flex items-center mt-3 text-sm text-gray-500">
                    <span class="topic-tag"># 美食分享</span>
                </div>
                
                <div class="flex items-center justify-between mt-3 pt-3 border-t border-gray-100">
                    <div class="flex items-center">
                        <div class="flex items-center mr-4">
                            <i class="action-icon iconfont icon-like mr-1"></i>
                            <span class="text-sm text-gray-500">186</span>
                        </div>
                        <div class="flex items-center mr-4">
                            <i class="action-icon iconfont icon-comment mr-1"></i>
                            <span class="text-sm text-gray-500">42</span>
                        </div>
                        <div class="flex items-center">
                            <i class="action-icon iconfont icon-share mr-1"></i>
                            <span class="text-sm text-gray-500">14</span>
                        </div>
                    </div>
                    <div>
                        <i class="action-icon iconfont icon-more"></i>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 内容卡片3：问答讨论 -->
        <div class="post-card">
            <div class="p-3">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full overflow-hidden mr-2">
                        <img src="https://via.placeholder.com/40x40?text=头像3" class="w-full h-full object-cover" alt="用户头像">
                    </div>
                    <div>
                        <div class="flex items-center">
                            <span class="text-sm font-medium">健康咨询师</span>
                            <span class="user-level">Lv.6</span>
                        </div>
                        <div class="text-xs text-gray-500 mt-0.5">2025-06-08 · 贵阳市</div>
                    </div>
                    <button class="ml-auto text-sm text-blue-500 px-2 py-1 rounded-full border border-blue-500">
                        + 关注
                    </button>
                </div>
                
                <div class="mt-2">
                    <div class="text-base font-medium">【问答】贵州哪里的温泉对风湿性关节炎最有效？</div>
                    <div class="text-sm text-gray-700 mt-1">
                        最近有很多朋友咨询关于贵州温泉的问题，特别是风湿性关节炎患者。贵州温泉资源丰富，不同的温泉矿物质含量不同，对缓解症状的效果也有差异。根据我多年的经验，以下几个温泉对风湿病有较好的效果：
                    </div>
                    <div class="mt-2 bg-gray-50 p-2 rounded text-sm text-gray-700">
                        1. 平坝樱花谷温泉：含硫磺和多种矿物质，对关节炎有明显缓解作用。<br>
                        2. 息烽温泉：水温适中，富含钙镁元素，长期浸泡可改善骨骼健康。<br>
                        3. 瓮安猴场温泉：硫酸盐型温泉，对皮肤病和关节炎都有好处。
                    </div>
                </div>
                
                <div class="mt-3 bg-blue-50 p-2 rounded">
                    <div class="text-xs text-blue-500 mb-1">推荐回答（来自中医养生专家）:</div>
                    <div class="text-sm text-gray-700">
                        补充一点，温泉虽好，但风湿病患者泡温泉也要注意时间和温度。建议水温不超过42度，每次浸泡不超过20分钟，间隔休息后再继续。另外，贵阳周边的修文温泉也很不错，富含硅酸盐，对关节有养护作用。
                    </div>
                </div>
                
                <div class="flex items-center mt-3 text-sm text-gray-500">
                    <span class="topic-tag"># 康养攻略</span>
                    <span class="badge ml-2">已解决</span>
                </div>
                
                <div class="flex items-center justify-between mt-3 pt-3 border-t border-gray-100">
                    <div class="flex items-center">
                        <div class="flex items-center mr-4">
                            <i class="action-icon iconfont icon-like mr-1"></i>
                            <span class="text-sm text-gray-500">124</span>
                        </div>
                        <div class="flex items-center mr-4">
                            <i class="action-icon iconfont icon-comment mr-1"></i>
                            <span class="text-sm text-gray-500">28</span>
                        </div>
                        <div class="flex items-center">
                            <i class="action-icon iconfont icon-share mr-1"></i>
                            <span class="text-sm text-gray-500">7</span>
                        </div>
                    </div>
                    <div>
                        <i class="action-icon iconfont icon-more"></i>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 内容卡片4：视频内容 -->
        <div class="post-card">
            <div class="p-3">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full overflow-hidden mr-2">
                        <img src="https://via.placeholder.com/40x40?text=头像4" class="w-full h-full object-cover" alt="用户头像">
                    </div>
                    <div>
                        <div class="flex items-center">
                            <span class="text-sm font-medium">贵州Vlog</span>
                            <span class="user-level">Lv.5</span>
                        </div>
                        <div class="text-xs text-gray-500 mt-0.5">2025-06-07 · 黔东南</div>
                    </div>
                    <button class="ml-auto text-sm text-gray-500 px-2 py-1 rounded-full bg-gray-100">
                        已关注
                    </button>
                </div>
                
                <div class="mt-2">
                    <div class="text-base font-medium">【视频】黔东南苗寨生活体验，感受原生态康养文化</div>
                    <div class="text-sm text-gray-700 mt-1 line-clamp-2">
                        在黔东南的一个小苗寨住了一周，体验了当地的传统生活方式。每天清晨随村民上山采药，午后学习苗族传统手工艺，晚上围着篝火听长辈讲述古老的故事...
                    </div>
                </div>
                
                <div class="mt-3 relative">
                    <img src="https://via.placeholder.com/750x420?text=苗寨生活视频封面" class="w-full h-48 object-cover rounded" alt="视频封面">
                    <div class="absolute inset-0 flex items-center justify-center">
                        <div class="w-12 h-12 rounded-full bg-black bg-opacity-50 flex items-center justify-center">
                            <i class="icon iconfont icon-play text-white"></i>
                        </div>
                    </div>
                    <div class="absolute bottom-2 right-2 bg-black bg-opacity-60 text-white px-1 py-0.5 rounded text-xs">
                        03:45
                    </div>
                </div>
                
                <div class="flex items-center mt-3 text-sm text-gray-500">
                    <span class="topic-tag"># 民族文化</span>
                    <span class="topic-tag"># 康养攻略</span>
                </div>
                
                <div class="flex items-center justify-between mt-3 pt-3 border-t border-gray-100">
                    <div class="flex items-center">
                        <div class="flex items-center mr-4">
                            <i class="action-icon iconfont icon-like mr-1"></i>
                            <span class="text-sm text-gray-500">356</span>
                        </div>
                        <div class="flex items-center mr-4">
                            <i class="action-icon iconfont icon-comment mr-1"></i>
                            <span class="text-sm text-gray-500">64</span>
                        </div>
                        <div class="flex items-center">
                            <i class="action-icon iconfont icon-share mr-1"></i>
                            <span class="text-sm text-gray-500">42</span>
                        </div>
                    </div>
                    <div>
                        <i class="action-icon iconfont icon-more"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 发布按钮 -->
    <div class="float-btn">
        <i class="icon iconfont icon-edit"></i>
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div class="flex justify-around py-2">
            <a href="../core/home.html" class="nav-item">
                <i class="icon iconfont icon-home"></i>
                <span>首页</span>
            </a>
            <a href="../core/discover.html" class="nav-item">
                <i class="icon iconfont icon-discover"></i>
                <span>发现</span>
            </a>
            <a href="#" class="nav-item active">
                <i class="icon iconfont icon-community"></i>
                <span>社区</span>
            </a>
            <a href="../core/messages.html" class="nav-item">
                <i class="icon iconfont icon-message"></i>
                <span>消息</span>
            </a>
            <a href="../core/profile.html" class="nav-item">
                <i class="icon iconfont icon-user"></i>
                <span>我的</span>
            </a>
        </div>
    </div>
</body>
</html> 